import { lazy, type JSX } from "react";
import { createBrowserRouter } from "react-router-dom";
import {
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";

const App = lazy(() => import("../App"));
const Detail = lazy(() => import("../pages/Detail/index"));
const Home = lazy(() => import("../pages/Home/index"));
const Login = lazy(() => import("../pages/Login/index"));
const My = lazy(() => import("../pages/My/index"));
const Props = lazy(() => import("../pages/Props/index"));
const Pop = lazy(() => import("../pages/Props/Pop/index"));

type homerouters = {
  path: string;
  element: JSX.Element;
  children?: homerouters;
  icon?: any;
  label?: string;
}[];

export const tabbar: homerouters = [
  {
    path: "/home",
    element: <Home />,
    icon: <MenuFoldOutlined></MenuFoldOutlined>,
    label: "首页",
  },
  {
    path: "/my",
    element: <My />,
    icon: <UserOutlined></UserOutlined>,
    label: "我的",
  },
  {
    path: "/detail",
    element: <Detail />,
    icon: <VideoCameraOutlined></VideoCameraOutlined>,
    label: "详情",
  },
  {
    path: "/props",
    element: <Props />,
    icon: <UserOutlined></UserOutlined>,
    label: "分类",
    children: [
      {
        path: "/props/pop",
        element: <Pop />,
        label: "哈哈",
      },
    ],
  },
];

const routes: homerouters = [
  {
    path: "/",
    element: <App />,
    children: tabbar,
  },
  {
    path: "/login",
    element: <Login />,
  },
];
const router = createBrowserRouter(routes);
export default router;
